<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>写轮眼</title>
  <style>
	body {background: #1d1d1d;}
	.eyes {
		width: 700px;
		margin: 200px auto;
		/* border: 1px solid red; */ 
	}
	.eye {
		position: relative;
		width: 200px;
		height: 100px;
		margin: 50px;
		border: 3px solid #1d1d1d;
		border-radius: 0% 53% / 1% 100%;
		box-shadow: -8px -20px 30px 3px #f0f0f0,0 5px 30px 1px #f0f0f0;
		background: #f0f0f0;
	}
	.eye .eyelash {
		position: absolute;
		width: 90px;
		height: 22px;
		border-top: 4px solid #1d1d1d;
		
	}
	.eye .l-lash1 {
		top: -20px;
		left: 38px;
		border-radius: 36%;
	}
	.eye .l-lash2 {
		top: -7px;
		left: 100px;
		border-radius: 50%;
		transform: rotate(27deg);
	}
	.eye .eyeball {
		position: relative;
		Z-index: 1;
		width: 98px;
		height: 98px;
		margin: auto;
		border: 2px solid #1d1d1d;
		box-shadow: 0px 0px 35px 0px #000 inset;
		background: #ac1c02;
		border-radius: 50%;
		animation: move 2s linear infinite alternate;
	}
	@keyframes move {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(6turn);
		}
	}
	.eye:hover .eyeball  {
		animation-play-state: paused;
	}
	.eye:hover div.eyeball {  /*  没效果 */
		transform: scale(1.5);
	}
	.eyeball .ball {
		position: absolute;
		top: 0;
		left: 0;
		width: 0px;
		height: 0px;
		border-top: 5px solid transparent;
		border-right: 50px solid #1d1d1d;
		border-bottom: 5px solid transparent;
	}
	.eyeball .b1 {
		top: 32px;
		left: 1px;
		transform: rotate(27deg);
	}
	.eyeball .b2 {
		top: 33px;
		left: 46px;
		transform: rotate(154deg);
	}
	.eyeball .b3 {
		top: 68px;
		left: 25px;
		transform: rotate(268deg);
	}
	.eyeball .b-c {
		position: absolute;
		top: 50%;
		left: 50%;
		background: #ac1c02;
		border-radius: 50%;
	}
	.eyeball .bc1 {
		Z-index: 1;
		margin-top: -5px;
		margin-left: -5px;
		width: 10px;
		height: 10px;
		box-shadow: 0px 0px 3px 0px #000 inset;
	}
	.eyeball .bc2 {
		z-index: -1;
		margin-top: -25px;
		margin-left: -25px;
		width: 50px;
		height: 50px;
		box-shadow: 0px 0px 15px 0px #000 inset;
	}
	.eyeball .dao {
		position: absolute;
		top: 15px;
		left: 8px;
		z-index: -2;
		width: 74px;
		height: 34px;
		background: #1d1d1d;
		transform: rotate(34deg);
		border-radius: 2.5em 2.5em 0 0/1.8em 1.8em 0 0;
		
	}
	
	.eyeball .d2 {
		position: absolute;
		top: 39px;
		left: 29px;
		z-index: -2;
		width: 74px;
		height: 34px;
		background: #1d1d1d;
		transform: rotate(159deg);
		border-radius: 2.5em 2.5em 0 0/1.8em 1.8em 0 0;
	}
	.eyeball .d3 {
		position: absolute;
		top: 44px;
		left: -1px;
		z-index: -2;
		width: 74px;
		height: 34px;
		background: #1d1d1d;
		transform: rotate(273deg);
		border-radius: 2.5em 2.5em 0 0/1.8em 1.8em 0 0;
	}

	.e-r {
		top: -155px;
		left: 400px;
		border-radius: 53% 0% / 100% 1%;
		box-shadow: 8px -20px 30px 3px #f0f0f0,0 5px 30px 1px #f0f0f0;
		background: #f0f0f0;
	}
	.eye .r-lash1 {
		top: -19px;
		left: 73px;
		border-radius: 36%;
	}
	.eye .r-lash2 {
		top: -7px;
		left: 14px;
		border-radius: 50%;
		transform: rotate(-27deg);
	}
  </style>
 </head>
 <body>
	<div class='eyes'>
		<div class='eye e-l'>
			<div class='eyelash l-lash1'>
			</div>
			<div class='eyelash l-lash2'>
			</div>
			<div class='eyeball'>
				<div class='ball b1'></div>
				<div class='ball b2'></div>
				<div class='ball b3'></div>
				<div class='b-c bc1'></div>
				<div class='b-c bc2'></div>
				<div class='dao d1'></div>
				<div class='dao d2'></div>	
				<div class='dao d3'></div>
			</div>
		</div>

		<div class='eye e-r'>
			<div class='eyelash r-lash1'>
			</div>
			<div class='eyelash r-lash2'>
			</div>
			<div class='eyeball'>
				<div class='ball b1'></div>
				<div class='ball b2'></div>
				<div class='ball b3'></div>
				<div class='b-c bc1'></div>
				<div class='b-c bc2'></div>
				<div class='dao d1'></div>
				<div class='dao d2'></div>	
				<div class='dao d3'></div>
			</div>
		</div>
	</div>
 </body>
</html>
